﻿<!DOCTYPE html>
<html>
<head>
    <title>景点购票详情</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/travel.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script type="text/javascript" src="/js/jquery/jquery.form.js"></script>
    <script type="text/javascript" src="/js/common.js"></script>
    <script src="/js/plugins/My97DatePicker/WdatePicker.js"></script>
    <script src="js/plugins/jquery-validation/jquery.validate.min.js"></script>
    <script src="js/plugins/jquery-validation/messages/messages_cn.js"></script>
    <script>
        $(function () {
            var money
            var user = JSON.parse(sessionStorage.getItem("user"));
            if (user) {
            } else {
                location.href = "/login.html";
            }
            //
            $("#infoForm").validate({
                rules:{
                    playTime:{
                        required:true
                    },
                    name:{
                        required:true,
                        rangelength: [2,4]
                    },
                    phone:{
                        required:true,
                        rangelength: [11,11]
                    },
                }
            })

            //地址
            //获取景点的id
            var params = getParams();
            if (params.id) {
                $.get("/scenicTicket/" + params.id, function (data) {
                    $("#ticketId").val(data.id);
                    //当前用户的id
                    $("#userId").val(user.id);
                    $("#name").val(user.nickName);
                    $(".userInfo").renderValues(data)
                    var cutoff = $("#cutoff").html()
                    money = data.price * cutoff
                    $("#realDel").html(data.price * cutoff)
                    $("#cutoff").html(cutoff * 100)

                });

                //跳转到支付页面
                $("#save").click(function () {
                    var url = $(this).data("href");
                    //先将订单保存
                    $("#lastDel").val(money)
                    $("#infoForm").ajaxSubmit({
                            beforeSubmit: function (params, form, options) {
                            },
                            success: function (data) {
                                if (data.success) {
                                    //将订单加入我的订单列表中,然后跳转到付款页面
                                    location.href = url + params.id + '&dealId=' + data.data;
                                }
                            }
                        }
                    )
                    //location.href = url + params.id;
                });
            } else {
                location.href = "/ticket.html";
            }

        })
    </script>
</head>
<body>

<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="javascript:history.go(-1);">
                <span><i class="fa fa-chevron-left fa-2x"></i></span>
            </a>
        </div>
    </div>
</div>


<div class="j_main m-main userInfo">

    <form action="/tour" method="post" id="infoForm">
        <input type="hidden" id="ticketId" name="ticketId">
        <input type="hidden" id="lastDel" name="realDel"/>
        <input type="hidden" id="state" name="state" value="1"/>
        <input type="hidden" id="userId" name="userId" value=""/>
        <div class="tit">
            <i></i>填写出游信息
        </div>
        <div class="txt">
            <dl>
                <dt>景点名称</dt>
                <dd class="line30" render-html="name"></dd>
            </dl>
            <dl>
                <dt>游玩日期:只能预订15天内的票</dt>
                <dd><input name="playTime" class="Wdate" type="text"
                           onclick="WdatePicker({minDate:'%y-%M-{%d+1}',maxDate:'%y-%M-{%d+15}'})"/></dd>
            </dl>
            <dl>
                <dt>门票价格:</dt>
                <dd name="price"><span>￥ <span render-html="price" id="price_d"></span></span>
                </dd>
                <dt>当前折扣:</dt>
                <dd name="price"><span> <span id="cutoff" render-html="cutoff" id="cutoff"></span>折</span>
                </dd>
            </dl>
        </div>


        <div class="tit">
            <i></i>填写您的信息
        </div>
        <div class="txt">
            <dl>
                <dt>姓名:</dt>
                <dd><input required="required" maxlength="10" type="text" id="name" name="name" placeholder="真实姓名（必填）"
                ></dd>
            </dl>
            <dl>
                <dt>手机号码:</dt>
                <dd class=""><input required="required"  type="tel" name="phone" id="phone" maxlength="11"
                                       placeholder="手机号码（必填）"></dd>
                <dd style="width:8rem;-webkit-box-flex:inherit">
                </dd>
            </dl>

        </div>


        <div class="notes">
            <p>
                温馨提示：为了保障您的权益，请务必正确填写您的联系方式。
            </p>
        </div>
    </form>
    <div class="submintFix">
        <dl>
            <dt>
                <div class="price">
                    订单总额 <span>￥:<em id="realDel"></em></span>
                </div>
            </dt>
            <dd class="submit">
                <button type="button" id="save" data-href="/mine/payfortravel.html?id=">提交订单</button>
            </dd>
        </dl>
    </div>
</div>

<script>
    $(function () {
    })
</script>


</body>
</html>